<template>
  <view class="surveyPage">
    <view class="submit-container">
      <u-button
        type="primary"
        @click="submitForm"
        :text="submitBtn.text"
        :loading="submitBtn.loading"
        :disabled="submitBtn.disabled"
      ></u-button>
    </view>

    <u-tabs :list="tabList" @click="selectTabItem" @change="selectTabItem" :scrollable="false" :current="activeTabIndex"></u-tabs>
    <swiper class="swiper" :current="activeTabIndex" @change="swiperChange">
      <swiper-item>
        <scroll-view class="swiper-content" scroll-y>
          <form-one ref="formOne"></form-one>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view class="swiper-content" scroll-y>
          <form-two ref="formTwo"></form-two>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view class="swiper-content" scroll-y>
          <form-three ref="formThree"></form-three>
        </scroll-view>
      </swiper-item>
      <swiper-item>
        <scroll-view class="swiper-content" scroll-y>
          <form-four ref="formFour"></form-four>
        </scroll-view>
      </swiper-item>
    </swiper>

    <u-loading-page :loading="loading" loadingText="正在加载页面..."></u-loading-page>
  </view>
</template>

<script>
import { mapState } from "vuex"
export default {
  components: {},
  data: () => ({
    tabList: [{ name: "基本情况" }, { name: "财产状况" }, { name: "收入情况" }, { name: "支出情况" }],
    activeTabIndex: 0,
    submitBtn: { text: "提交", loading: false, disabled: false },
    loading: true,
  }),
  computed: {
    ...mapState(["mainInfo", "researchInfo"]),
  },
  methods: {
    selectTabItem(detail) {
      this.activeTabIndex = detail.index
    },

    swiperChange(e) {
      const { current } = e.detail
      this.activeTabIndex = current
    },

    // 提交表单
    async submitForm() {
      // 截取无用尾部
      const familySize = this.$refs.formOne.familySize
      const family = JSON.parse(JSON.stringify(this.$refs.formOne.form.family))
      const formOne = JSON.parse(JSON.stringify(this.$refs.formOne.form))
      formOne.family = family.splice(0, familySize)
      // console.log(formOne)

      if (!this.verifyForm(this.$refs.formOne.form, "表1")) return
      if (!this.verifyForm(this.$refs.formTwo.form, "表2")) return
      if (!this.verifyForm(this.$refs.formThree.form, "表3")) return
      if (!this.verifyForm(this.$refs.formFour.form, "表4")) return

      this.submitBtn = { text: "提交中", loading: true, disabled: true }

      const [err, res] = await uni.request({
        // url: "http://10.147.18.213:7763/evaluate",
        url: "https://lovetao.top/evaluate",
        method: "POST",
        data: {
          questionnaire_base_info: JSON.parse(JSON.stringify(this.mainInfo)),
          questionnaire_info: JSON.parse(JSON.stringify(this.researchInfo)),
          formOne: formOne,
          formTwo: this.$refs.formTwo.form,
          formThree: this.$refs.formThree.form,
          formFour: this.$refs.formFour.form,

          // ...formData
        },
      })

      this.submitBtn = { text: "提交", loading: false, disabled: false }
      if (err) return console.log(err)
      // console.log(res.data)
      uni.navigateTo({ url: "/pages/resultPage/resultPage?data=" + res.data })
    },

    // 表单校验
    verifyForm(form, sign) {
      let flag = true
      Object.keys(form).forEach((key1) => {
        if (form[key1] instanceof Object) {
          // 数组且为空
          if (Array.isArray(form[key1])) {
            if (form[key1].length === 0) {
              flag = false
              return uni.$u.toast(`${sign}有选项未填写`)
            }
          } else {
            for (const key2 in form[key1]) {
              // 数组且为空
              if (Array.isArray(form[key1][key2])) {
                if (form[key1][key2].length === 0) {
                  flag = false
                  return uni.$u.toast(`${sign}有选项未填写`)
                }
              } else if (!form[key1][key2].trim()) {
                // 对象且有空数据
                flag = false
                return uni.$u.toast(`${sign}有选项未填写`)
              }
            }
          }
        } else if (!form[key1].trim()) {
          flag = false
          return uni.$u.toast(`${sign}有选项未填写`)
        }
      })
      return flag
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
    // setTimeout(() => {
    //   this.loading = false
    // }, 5000)
    this.loading = false
  },
}
</script>

<style lang="scss" scoped>
.surveyPage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  // background-color: #f6f6f6;

  .submit-container {
    box-sizing: border-box;
    height: 100rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10%;
  }

  .swiper {
    flex: 1;
    box-sizing: border-box;

    .swiper-content {
      box-sizing: border-box;
      height: 100%;
      padding: 20rpx;
      padding-bottom: 40rpx;
      background-color: #f6f6f6;
    }
  }
}
</style>
